import React, { Component } from 'react'

export default class App extends Component {
  // 第二方式使用 类的构造函数实现
  // constructor()属于react组件的 生命周期钩子函数
  // 为什么要调用 super(props)
  // 子类必须在constructor方法中调用super方法，
  //    否则新建实例时会报错。这是因为子类自己的this对象，
  //    必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，
  //    然后再对其进行加工，加上子类自己的实例属性和方法。
  //    如果不调用super方法，子类就得不到this对象。

  // es5 和 es6 的继承机制的不同
  //    ES5 的继承，实质是先创造子类的实例对象this，
  //    然后再将父类的方法添加到this上面（Parent.apply(this)）。
  //    ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，
  //    加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
  constructor (props) {
    super(props)
    this.state = {
      name: 'React',
      isLiked: false
    }
  }
  render() {
    return (
      <div>
        <div>欢迎来到 { this.state.name } 的世界</div>
        { this.state.isLiked ? '喜欢' : '不喜欢'}
      </div>
    )
  }
}
